﻿@namespace BlazorFluentUI
@inherits FluentUIComponentBase

<div class=@($"mediumFont ms-DatePicker{(IsDatePickerShown ? " ms-DatePicker--is-open" : "" )} {(Disabled ? " ms-DatePicker--is-disabled" : "" )} {ClassName}")
     style=@Style>
    <div aria-haspopup="true"
         aria-owns=@(IsDatePickerShown ? calloutId : "")
         @ref="datePickerDiv">
        <TextField Label=@Label
                      @ref="textFieldComponent"
                      AriaLabel=@AriaLabel
                      AriaControls=@(IsDatePickerShown ? calloutId : "")
                      Required=@IsRequired
                      Disabled=@Disabled
                      ErrorMessage=@GetErrorMessage()
                      Placeholder=@Placeholder
                      Borderless=@Borderless
                      Value=@FormattedDate
                      Underlined=@Underlined
                      ReadOnly=@(!AllowTextInput)
                      ClassName=@($"ms-DatePicker-textField")
                      IconName="Calendar"
                      OnKeyDown=@OnTextFieldKeyDown
                      OnChange=@OnTextFieldChange
                      OnClick=@(args => {
                                    if (!DisableAutoFocus && !IsDatePickerShown && !Disabled)
                                    {
                                        ShowDatePickerPopup();
                                        return;
                                    }
                                    if (AllowTextInput && !IsDatePickerShown)
                                    {
                                        DisableAutoFocus = !DisableAutoFocus;
                                        //DismissDatePickerPopup();
                                    }
                                })
                      OnBlur=@OnTextFieldBlur
                      OnFocus=@OnTextFieldFocus />
    </div>
    @if (IsDatePickerShown)
    {
        <Callout Role="dialog"
                    AriaLabel=@PickerAriaLabel
                    IsBeakVisible="false"
                    GapSpace="0"
                    DoNotLayer="false"
                    FabricComponentTarget="textFieldComponent"
                    DirectionalHint="DirectionalHint.BottomLeftEdge"
                    ClassName="ms-DatePicker-callout"
                    OnDismiss=@CalendarDismissed>
            <FocusTrapZone IsClickableOutsideFocusTrap="true"
                              DisableFirstFocus=@DisableAutoFocus
                              ForceFocusInsideTrap="false">
                <Calendar OnSelectDate=@OnSelectedDate
                             OnDismiss=@CalendarDismissed
                             IsMonthPickerVisible=@IsMonthPickerVisible
                             IsTimePickerVisible=@IsTimePickerVisible
                             ShowMonthPickerAsOverlay=@ShowMonthPickerAsOverlay
                             Today=@Today
                             Value=@Value
                             FirstDayOfWeek=@FirstDayOfWeek
                             HighlightCurrentMonth=@HighlightCurrentMonth
                             HighlightSelectedMonth=@HighlightSelectedMonth
                             ShowWeekNumbers=@ShowWeekNumbers
                             FirstWeekOfYear=@FirstWeekOfYear
                             ShowGoToToday=@ShowGoToToday
                             DateTimeFormatter=@DateTimeFormatter
                             MinDate=@MinDate
                             MaxDate=@MaxDate
                             ShowCloseButton=@ShowCloseButton
                             AllFocusable=@AllFocusable />
            </FocusTrapZone>
        </Callout>
    }
</div>